<!--
  * @Author: 赵宇
  * @Description: 登录页
  * @Date: 2023-01-11 10:24:01
 * @LastEditTime: 2023-02-22 17:29:09
 * @LastEditors: zhao 13370229059@163.com
 * @FilePath: \pcj\src\page\login\index.vue
 -->
<template>
  <div class="login">
    <div class="login-box">
      <div class="login-box-video">
        <video muted autoplay loop :src="mp4"></video>
      </div>
      <div class="login-box-input">
        <transition name="fade-slide">
          <div class="info" v-if="login.type === 'login'">
            <div class="flex-1">
              <p class="info-title">不知道叫啥的 系统</p>
              <p class="info-name">手机号</p>
              <el-input class="info-input" v-model="login.phone" placeholder="请输入手机号" clearable></el-input>
              <p class="info-name mt-10">密码</p>
              <el-input class="info-input" v-model="login.password" placeholder="请输入密码" clearable type="password" show-password></el-input>
            </div>
            <div class="flex-1 dis-flex flex-dir-column flex-x-center">
              <el-button class="info-button" type="primary" :loading="login.loading" @click="onLogin">登录</el-button>
            </div>
            <div class="info-bottom">
              <el-checkbox v-model="sad" label="" :indeterminate="false">记住密码</el-checkbox>

              <el-link type="primary" @click="login.type = 'register'">
                <el-icon> <IEpToiletPaper /> </el-icon>
                点击注册
              </el-link>
            </div>
          </div>
          <div class="info" v-else-if="login.type === 'register'">
            <el-scrollbar class="pl-15 pr-15">
              <el-form :model="register" ref="registerRef" :rules="registerValidate" label-width="80px" :inline="false" size="normal">
                <el-form-item label="用户名称" prop="userName">
                  <el-input v-model="register.userName" placeholder="请输入用户名称">
                    <template #prefix>
                      <el-icon> <IEpUser /> </el-icon>
                    </template>
                  </el-input>
                </el-form-item>
                <el-form-item label="企业名称" prop="tenantName">
                  <el-input v-model="register.tenantName" placeholder="请输入企业名称">
                    <template #prefix>
                      <el-icon> <IEpOfficeBuilding /> </el-icon>
                    </template>
                  </el-input>
                </el-form-item>
                <el-form-item label="手机号" prop="phone">
                  <el-input v-model="register.phone" placeholder="请输入手机号" maxlength="11" show-word-limit>
                    <template #prefix>
                      <el-icon> <IEpIphone /> </el-icon>
                    </template>
                  </el-input>
                </el-form-item>
                <el-form-item label="验证码" prop="code">
                  <div class="dis-flex">
                    <el-input v-model="register.code" placeholder="请输入验证码" maxlength="4" show-word-limit>
                      <template #prefix>
                        <el-icon> <IEpMessage /> </el-icon>
                      </template>
                    </el-input>
                    <el-button type="primary" class="ml-10" @click="onPushMessage" :disabled="!isPhone(register.phone) || registerStates.type">
                      {{ codeText }}
                    </el-button>
                  </div>
                </el-form-item>
                <el-form-item label="省市区">
                  <el-input v-model="register.provinceSerialNo" placeholder="请选择省市区"></el-input>
                </el-form-item>
                <el-form-item label="详细地址">
                  <el-input v-model="register.address" placeholder="请输入详细地址">
                    <template #prefix>
                      <el-icon> <IEpLocation /> </el-icon>
                    </template>
                  </el-input>
                </el-form-item>
                <el-form-item label="密码" prop="password">
                  <el-input v-model="register.password" type="password" placeholder="请输入密码" show-password>
                    <template #prefix>
                      <el-icon> <IEpLock /> </el-icon>
                    </template>
                  </el-input>
                </el-form-item>
                <el-form-item label="确认密码" prop="password1">
                  <el-input v-model="register.password1" type="password" placeholder="请输入确认密码" show-password>
                    <template #prefix>
                      <el-icon> <IEpLock /> </el-icon>
                    </template>
                  </el-input>
                </el-form-item>
              </el-form>
              <el-button class="info-button mt-10" type="primary" :loading="registerStates.loading" @click="onSubmit">注册</el-button>
            </el-scrollbar>
            <div class="info-bottom">
              <span></span>
              <el-link type="primary" @click="login.type = 'login'">
                <el-icon> <IEpDArrowLeft /> </el-icon>
                返回登陆
              </el-link>
            </div>
          </div>
        </transition>
      </div>
    </div>
  </div>
</template>

<script setup>
import mp4 from '@/file/video/login.mp4';
import { post, get } from '@/api/index.js';
const $message = inject('$message');
const { isPhone } = inject('$global');
const router = useRouter();
// 登陆需要的参数
let login = reactive({
  phone: '13370229059',
  password: '123456',
  loading: false,
  type: 'login'
});
// 验证token 生成个人token
const sign = async token => {
  let { result } = await post('Account/Sign', {
    token,
    loginType: 1
  });
  localStorage.setItem('token', result.token);
  router.push('/index');
};

// 点击登陆
const onLogin = async val => {
  try {
    login.loading = true;
    let { result } = await post('Account/Login', { ...login, ...val });
    login.loading = false;
    if (result.length === 1) {
      sign(result[0].token);
    }
  } catch (error) {
    login.loading = false;
  }
};
/*
 * @description: 下面是注册区域代码
 */
let registerRef = ref();
let registerStates = reactive({
  type: false,
  stop: null,
  time: 60,
  loading: false
});
// 注册需要的参数
let register = reactive({
  userName: '',
  tenantName: '',
  phone: '',
  code: '',
  provinceSerialNo: '',
  provinceAddress: '',
  cityAddress: '',
  areaAddress: '',
  address: '',
  password: '',
  password1: ''
});
const codeText = computed(() => {
  if (!registerStates.type) {
    return '获取验证码';
  } else {
    return registerStates.time + '秒后可重新获取';
  }
});
// 监听发送验证码
watch(
  () => registerStates.type,
  val => {
    if (!val) return;
    registerStates.stop = setInterval(() => {
      if (registerStates.time === 0) {
        registerStates.type = false;
        clearInterval(registerStates.stop);
        return;
      }
      --registerStates.time;
    }, 1000);
  },
  {
    immediate: true
  }
);
const validatePass = (rule, value, callback) => {
  if (value !== register.password) {
    callback(new Error('二次输入的密码不同!'));
  }
  callback();
};
const validatePhone = (rule, value, callback) => {
  if (!isPhone(value)) {
    callback(new Error('手机号码不正确,请检查!'));
  }
  callback();
};
let registerValidate = reactive({
  tenantName: [{ required: true, trigger: 'blur', message: '企业名称不能为空' }],
  userName: [{ required: true, trigger: 'blur', message: '用户名称不能为空' }],
  phone: [
    { required: true, trigger: 'blur', message: '手机号不能为空' },
    { validator: validatePhone, trigger: 'blur' }
  ],
  code: [
    { required: true, trigger: 'blur', message: '验证码不能为空' },
    { min: 4, max: 4, trigger: 'blur', message: '验证码为4位数字' }
  ],
  password: [
    { required: true, trigger: 'blur', message: '密码不能为空' },
    { min: 6, trigger: 'blur', message: '密码不能低于6位,请检查' }
  ],
  password1: [
    { required: true, trigger: 'blur', message: '密码不能为空' },
    { validator: validatePass, trigger: 'blur' }
  ]
});
// 发送验证码的方法
const onPushMessage = async () => {
  await get('Account/VerifyCode', {
    phone: register.phone
  });
  registerStates.time = 60;
  registerStates.type = true;
  $message.success('获取验证码成功,初始验证码为0000');
  register.code = '0000';
};
// 提交注册
const onSubmit = async () => {
  if (!registerRef.value) return;
  registerRef.value.validate(async val => {
    if (!val) return;
    try {
      registerStates.loading = true;
      await post('Account/Register', register);
      $message.success('注册成功，自动登陆中...');
      await post('Account/Login', {
        phone: register.phone,
        password: register.password
      });
      registerStates.loading = false;
    } catch (error) {
      registerStates.loading = false;
    }
  });
};
</script>

<style lang="scss" scoped>
.login {
  height: 100vh;
  width: 100vw;
  background-image: linear-gradient(to right, #a1c4fd 0%, #c2e9fb 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  &-box {
    background-color: #fff;
    min-height: 400px;
    height: 60%;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: var(--el-box-shadow-light);
    display: flex;
    &-video {
      flex: 4;
      video {
        width: 100%;
        height: 100%;
        object-fit: fill;
      }
    }
    &-input {
      width: 25vw;
      position: relative;
      overflow: hidden;
      .info {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        text-align: center;
        color: $pro-color;
        height: 100%;
        width: 100%;
        padding: 5%;
        display: flex;
        flex-direction: column;
        &-title {
          font-size: 26px;
          margin-bottom: 35px;
        }
        &-name {
          font-size: 22px;
        }
        :deep(.info-input) {
          .el-input__wrapper {
            background-color: #fff;
            box-shadow: none;
            border-bottom: 1px solid $pro-color;
            font-size: 20px;
          }
        }
        &-button {
          width: 100%;
          border-radius: 20px;
          padding: 20px;
          font-size: 20px;
          border: none;
          background-size: 120%;
          background-image: linear-gradient(to right, #a18cd1 0%, #fbc2eb 100%);
          &:hover {
            animation: gradient 1.5s ease-in-out infinite;
          }
        }
        &-bottom {
          width: 100%;
          display: flex;
          padding: 10px;
          justify-content: space-between;
        }
      }
    }
  }
}
@keyframes gradient {
  50% {
    background-position: 100% 0;
  }
}

.fade-slide-enter-active,
.fade-slide-leave-active {
  transition: all 0.5s ease-out;
}

.fade-slide-enter-from {
  opacity: 0;
  transform: translate(100%, -50%) !important;
}
.fade-slide-leave-to {
  opacity: 0;
  transform: translate(-100%, -50%) !important;
}
</style>
